<!doctype html>  
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
	<meta charset="utf-8">
	
	<title>Porto - Responsive HTML5 Template</title>
	
	<meta name="description" content="Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form or to our support forum at http://support.crivos.com/.">
	<meta name="author" content="Crivos">
	<meta name="copyright" content="Crivos">
	<meta name="generator" content="Documenter v1.6 http://rxa.li/documenter">
	<meta name="date" content="2013-04-02T00:00:00+02:00">
	
	<link rel="stylesheet" href="css/documenter_style.css" media="all">
	
	http://crivos.com/themes/porto/img/favicon.ico
	<script src="js/jquery.1.6.4.js"></script>
	
	<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
	<script src="js/jquery.easing.js"></script>
	
	<link rel="stylesheet" href="css/shDocumenter.css" media="screen">
	<script src="js/shCore.js"></script>
	<script src="js/shBrushXml.js"></script>
	<script src="js/shBrushPhp.js"></script>
	<script>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script>

	<script>document.createElement('section');var duration=500,easing='swing';</script>
	<script src="js/script.js"></script>
	
	<style>
		html{background-color:#FFFFFF;color:#383838;}
		::-moz-selection{background:#444444;color:#DDDDDD;}
		::selection{background:#444444;color:#DDDDDD;}
		#documenter_sidebar #documenter_logo{background-image:url(assets/images/image_1.png);}
		a{color:#0000FF;}
		hr{border-top:1px solid #EBEBEB;border-bottom:1px solid #FFFFFF;}
		#documenter_sidebar, #documenter_sidebar ol a{background-color:#DDDDDD;color:#222222;}
		#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #EEEEEE;-moz-text-shadow:1px 1px 0px #EEEEEE;text-shadow:1px 1px 0px #EEEEEE;}
		#documenter_sidebar ol{border-top:1px solid #AAAAAA;}
		#documenter_sidebar ol a{border-top:1px solid #EEEEEE;border-bottom:1px solid #AAAAAA;color:#444444;}
		#documenter_sidebar ol a:hover{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_sidebar ol a.current{background:#444444;color:#DDDDDD;border-top:1px solid #444444;}
		#documenter_copyright{display:block !important;visibility:visible !important;}
	</style>
	
</head>
<body>
	<div id="documenter_sidebar">
		<a href="#documenter_cover" id="documenter_logo"></a>
		<ol id="documenter_nav">
			<li><a class="current" href="#documenter_cover">Start</a></li>
			<li><a href="#tips">Tips</a></li>
			<li><a href="#files_structure">Files Structure</a></li>
			<li><a href="#html_structure">HTML Structure</a></li>
			<li><a href="#css_structure">CSS Structure</a></li>
			<li><a href="#javascript">Javascript</a></li>
			<li><a href="#customization_styles">Customization & Styles</a></li>
			<li><a href="#icons">Icons</a></li>
			<li><a href="#sliders">Sliders</a></li>
			<li><a href="#lightbox">Lightbox</a></li>
			<li><a href="#filtering">Filtering</a></li>
			<li><a href="#php_scripts">PHP Scripts</a></li>
			<li><a href="#skin">Skin</a></li>
			<li><a href="#social_media_icons">Social Media - Icons</a></li>
			<li><a href="#search">Search</a></li>
			<li><a href="#newsletter">Newsletter</a></li>
			<li><a href="#responsive">Responsive</a></li>
			<li><a href="#old_browsers">Old Browsers</a></li>
			<li><a href="#source_credits">Source & Credits</a></li>

		</ol>
		<div id="documenter_copyright">Copyright Crivos 2013<br>
		made with the <a href="http://rxa.li/documenter">Documenter v1.6</a> 
		</div>
	</div>
	<div id="documenter_content">
	<section id="documenter_cover"><h1>Porto</h1><h2>Responsive HTML5 Template</h2><hr><ul><li>Created: 02/15/2013</li><li>latest Update: 04/02/2013</li><li>By: Crivos</li><li><a href=""></a></li><li>Email: <a href="mailto:&#99;&#114;&#105;&#118;&#111;&#115;&#64;&#99;&#114;&#105;&#118;&#111;&#115;&#46;&#99;&#111;&#109;">&#99;&#114;&#105;&#118;&#111;&#115;&#64;&#99;&#114;&#105;&#118;&#111;&#115;&#46;&#99;&#111;&#109;</a></li></ul><p>Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form or to our support forum at http://support.crivos.com/.</p></section><section id="tips">
	<h3>Tips</h3><hr class="notop">
<p class="info">
	Most of the questions are already answered in the FAQ&#39;s:<br>
	<a href="http://www.crivos.com/forums/forum/porto-template/faqs/">http://www.crivos.com/forums/forum/porto-template/faqs/</a></p>
<p class="info">
	<strong>Due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been updated to your website.</strong></p>
<p class="info">
	Use Firebug or Chrome Developer Tools.</p>
<p class="info">
	Do not start from scratch, use an existing page from the demo and modify it to learn how it works.</p>
<p class="info">
	Getting an error message? Someone might have seen it too, try a google search for a quick fix.</p>
<p class="info">
	Explore the live demo for pages ideas and sample code.</p>
</section>
<section id="files_structure">
	<h3>Files Structure</h3><hr class="notop">
<pre>
- css (Template CSS)
    - fonts (Font Faces, Font Awesome, etc..)
    - skins
        blue.css
        ... (Create your own skin)

- img (All Images)

- js (Template JS)
    - views (JS to run in specific pages. I.E: Home or Contact Us)

- master (You don&#39;t need to include that folder in your project, it has only the Style Switcher functions)

- php (PHP Helpers - I.E: Contact Us form.)

- vendor (All external libs. We keep all of them in this folder to make updates easily.)
</pre>
<p>	&nbsp;</p>
</section>
<section id="html_structure">
	<h3>HTML Structure</h3><hr class="notop">
<p>	The template is based on <strong>Bootstrap </strong>Framework - <a href="http://twitter.github.com/bootstrap/">http://twitter.github.com/bootstrap/</a></p>
<p>	The default Bootstrap grid system utilizes <strong>12 columns</strong>, making for a <strong>1170px </strong>wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.<br>
	<br>
	Create a .row and add the appropriate number of .span* columns.<br>
	&nbsp;</p>
<h4>
	HTML Markup</h4>
<pre class="brush: html">
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;span12&quot;&gt;
        Level 1 column
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;span6&quot;&gt;Level 2&lt;/div&gt;
            &lt;div class=&quot;span6&quot;&gt;Level 2&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

</pre>
<p>	&nbsp;</p>
<p>	If you need more information, please visit this site: <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">http://twitter.github.com/bootstrap/scaffolding.html#gridSystem</a></p>
</section>
<section id="css_structure">
	<h3>CSS Structure</h3><hr class="notop">
<p>	The organization of the CSS is one of our priorities.<br>
	These are the CSS file we&#39;re using in the template:</p>
<pre>
- bootstrap.css - (Generic styles, resets &amp; normalization)

- bootstrap-responsive.css - (Responsive grid styles)

- bootstrap-responsive-boxed.css - (Responsive grid styles used in the boxed layout version)

- theme.css - (The basic layout structure styles)

- theme-elements.css - (Elements such as sliders, boxes, titles, etc...)

- theme-responsive.css - (This stylesheet contains responsive rules for adapting the template to any resolution, from desktop to small mobile.)
</pre>
<p>	&nbsp;</p>
</section>
<section id="javascript">
	<h3>Javascript</h3><hr class="notop">
<p>	<strong>jQuery </strong>- is a Javascript library that greatly reduces the amount of code that you must write.<br>
	For more information, please visit <a href="http://www.jquery.com/">http://www.jquery.com/</a><br>
	<br>
	The initialization of the elements, libs and features is made by the file theme.js, in the JS folder.<br>
	Take a look at the &quot;build&quot; function to see what it does.</p>
</section>
<section id="customization_styles">
	<h3>Customization & Styles</h3><hr class="notop">
<h4>
	Colors</h4>
<p>	The style switcher was made to support unlimited skin colors, for that we use <strong>Less </strong>(<a href="http://www.lesscss.org/">http://www.lesscss.org/</a>) to process the CSS dinamically in the demo and show the color right away.<br>
	You don&#39;t need to use LESS in your project, after you done customizing your skin you may want to grab the generated code and save it in a file in the folder:<strong> /css/skins/(skin-name).css</strong><br>
	&nbsp;</p>
<h4>
	Layout Style</h4>
<p>	The template has two different layout modes, Wide and Boxed. The wide one is the default option, if you want to use the Boxed version, add the following class in the &lt;body&gt;:</p>
<pre class="brush: html">
&lt;body class=&quot;boxed&quot;&gt;
</pre>
<p class="info">
	<strong>Warning!</strong> If you choose the boxed layout, you must use the file bootstrap-responsive-boxed.css instead of the bootstrap-responsive.css, it&#39;s required because the width of the boxed layout is smaller than the wide one.)</p>
<p>	<br>
	You can also customize the background color or image.<br>
	&nbsp;</p>
<h4>
	Fonts</h4>
<p>	To change the embedded font, please take a look in the head part of the website and you will find this tag:</p>
<pre class="brush: html">
 &lt;link href=&quot;http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
</pre>
<p>	To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code.</p>
</section>
<section id="icons">
	<h3>Icons</h3><hr class="notop">
<p>	<strong>Font Awesome</strong> is a @font-face iconset that you can change size and color of the icons using CSS.<br>
	<br>
	If you need more information, please visit this site: <a href="http://fortawesome.github.com/Font-Awesome/">http://fortawesome.github.com/Font-Awesome/</a></p>
<p>	&nbsp;</p>
<h4>
	HTML Markup:</h4>
<pre class="brush: html">
&lt;i class=&quot;icon-edit&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;icon-search&quot;&gt;&lt;/i&gt;
...
</pre>
<p>	&nbsp;</p>
</section>
<section id="sliders">
	<h3>Sliders</h3><hr class="notop">
<h4>
	Home Page Sliders</h4>
<h4 style="margin-left: 40px;">
	&nbsp;&nbsp;&nbsp;&nbsp;<br>
	Revolution Slider</h4>
<p style="margin-left: 40px;">
	This is one of the best slider plugins we have seen so far.<br>
	<br>
	&quot;Slider Revolution is a fully developed slide displaying system offering the capability to show images, videos and captions paired with simple, modern and fancy 3D transitions. On top of that, Slider Revolution is fully responsive and mobile optimized and can take on any dimensions.&quot;<br>
	<br>
	More details on <a href="http://themes.themepunch.com/?theme=revolution_jq">http://themes.themepunch.com/?theme=revolution_jq</a></p>
<p style="margin-left: 40px;">
	&nbsp;</p>
<h4>
	Content Sliders</h4>
<p>	&nbsp;</p>
<p style="margin-left: 40px;">
	<strong>Flexslider </strong>is the slider you&#39;ll find in the content.<br>
	Flexslider is a simple slideshow script but with lots of options. You can find more documentaion here <a href="http://www.woothemes.com/flexslider/">http://www.woothemes.com/flexslider/</a><br>
	<br>
	We included in the template CSS/JS a few customizations in order to show it&#39;s variations.<br>
	<br>
	The variations of the slider is defined by the CSS Class and in the &quot;data-plugin-options&quot; attribute, which extends the default plugin options.<br>
	<br>
	You can add the following classes:</p>
<p style="margin-left: 80px;">
	<br>
	<strong>- flexslider-simple<br>
	<br>
	- flexslider-top-title<br>
	<br>
	- flexslider.unstyled</strong></p>
<h4 style="margin-left: 40px;">
	<br>
	HTML Markup:</h4>
<pre class="brush: html" style="margin-left: 40px;">
&lt;div class=&quot;flexslider flexslider-top-title unstyled&quot; data-plugin-options=&#39;{&quot;controlNav&quot;:false, &quot;animation&quot;:&quot;slide&quot;, &quot;slideshow&quot;: false, &quot;maxVisibleItems&quot;: 3}&#39;&gt;
    &lt;ul class=&quot;slides&quot;&gt;
        &lt;li&gt;
            ...
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</pre>
<p>	&nbsp;</p>
</section>
<section id="lightbox">
	<h3>Lightbox</h3><hr class="notop">
<p>	The filter is driven by the <strong>Fancybox </strong>script.</p>
<p>	For more information check the <a href="http://fancyapps.com/fancybox/" target="_blank">documentation</a> and <a href="http://fancyapps.com/store/" target="_blank">view licensing options.</a></p>
<p>	<a href="http://fancyapps.com/fancybox/" target="_blank">http://fancyapps.com/fancybox</a></p>
</section>
<section id="filtering">
	<h3>Filtering</h3><hr class="notop">
<p>	The filter is driven by the Isotope script - <a href="http://isotope.metafizzy.co/">http://isotope.metafizzy.co/</a><br>
	<br>
	Here&#39;s an example of usage:</p>
<h4>
	<br>
	Filter Options:</h4>
<pre class="brush: html">
&lt;ul class=&quot;nav nav-pills sort-source&quot; data-sort-id=&quot;team&quot; data-option-key=&quot;filter&quot;&gt;
    &lt;li data-option-value=&quot;*&quot; class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Show All&lt;/a&gt;&lt;/li&gt;
    &lt;li data-option-value=&quot;.leadership&quot;&gt;&lt;a href=&quot;#&quot;&gt;Leadership&lt;/a&gt;&lt;/li&gt;
    &lt;li data-option-value=&quot;.marketing&quot;&gt;&lt;a href=&quot;#&quot;&gt;Marketing&lt;/a&gt;&lt;/li&gt;
    &lt;li data-option-value=&quot;.development&quot;&gt;&lt;a href=&quot;#&quot;&gt;Development&lt;/a&gt;&lt;/li&gt;
    &lt;li data-option-value=&quot;.design&quot;&gt;&lt;a href=&quot;#&quot;&gt;Design&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
<h4>
	<br>
	Filter Data:</h4>
<pre class="brush: html">
&lt;ul class=&quot;team-list sort-destination&quot; data-sort-id=&quot;team&quot;&gt;
    &lt;li class=&quot;span3 isotope-item leadership&quot;&gt;
        &lt;div class=&quot;team-item thumbnail&quot;&gt;
            &lt;a href=&quot;#&quot; class=&quot;thumb-info team&quot;&gt;
                &lt;img alt=&quot;&quot; src=&quot;img/team/team-1.jpg&quot;&gt;
                &lt;span class=&quot;thumb-info-title&quot;&gt;
                    &lt;span class=&quot;thumb-info-inner&quot;&gt;John Doe&lt;/span&gt;
                    &lt;span class=&quot;thumb-info-type&quot;&gt;CEO&lt;/span&gt;
                &lt;/span&gt;
            &lt;/a&gt;
            &lt;span class=&quot;thumb-info-caption&quot;&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac ligula mi, non suscipitaccumsan.&lt;/p&gt;
                &lt;div class=&quot;thumb-info-social-icons&quot;&gt;
                    &lt;a rel=&quot;tooltip&quot; data-placement=&quot;bottom&quot; target=&quot;_blank&quot; href=&quot;http://www.facebook.com&quot; data-original-title=&quot;Facebook&quot;&gt;&lt;i class=&quot;icon-facebook&quot;&gt;&lt;/i&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/a&gt;
                    &lt;a rel=&quot;tooltip&quot; data-placement=&quot;bottom&quot; href=&quot;http://www.twitter.com&quot; data-original-title=&quot;Twitter&quot;&gt;&lt;i class=&quot;icon-twitter&quot;&gt;&lt;/i&gt;&lt;span&gt;Twitter&lt;/span&gt;&lt;/a&gt;
                    &lt;a rel=&quot;tooltip&quot; data-placement=&quot;bottom&quot; href=&quot;http://www.linkedin.com&quot; data-original-title=&quot;Linkedin&quot;&gt;&lt;i class=&quot;icon-linkedin&quot;&gt;&lt;/i&gt;&lt;span&gt;Linkedin&lt;/span&gt;&lt;/a&gt;
                &lt;/div&gt;
            &lt;/span&gt;
        &lt;/div&gt;
    &lt;/li&gt;
    .....
&lt;/ul&gt;
</pre>
<p>	&nbsp;</p>
</section>
<section id="php_scripts">
	<h3>PHP Scripts</h3><hr class="notop">
<p>	Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.<br>
	To do this, please open<strong> &quot;php/contact-form.php&quot; </strong>file and change this line:</p>
<pre class="brush: php">
$to = &#39;&#121;&#111;&#117;&#64;&#100;&#111;&#109;&#97;&#105;&#110;&#46;&#99;&#111;&#109;&#39;;
</pre>
<p class="warning">
	One notice: this will be functional only on your server, php file can not be executed on your local computer.</p>
</section>
<section id="skin">
	<h3>Skin</h3><hr class="notop">
<p>
	The template is set to use the blue skin as default, if you want to use the style switcher to generate the skin using another color you can uncomment that line:</p>
<p>
	<img alt="" src="assets/images/image_4.jpg"></p>
<p>
	You can also generate your own skin color:</p>
<p>
	<br>
	<img alt="" src="assets/images/image_3.jpg"></p>
<p>
	&nbsp;</p>
<p>
	<img alt="" src="assets/images/image_2.jpg"></p>
<p>
	&nbsp;</p>
<p>
	Copy that and save as a css skin file.</p>
<p>
	<strong>Make sure that the path to the skin file is correct.</strong></p>
<p>
	Due to local security restrictions, the style switcher will not work locally (file://), especially in Chrome. I use Firefox and it works, if you don&#39;t have Firefox get all files uploaded to a web server. (It&#39;s just for the Style Switcher).</p>
<p>
	You can also use our Demo Site to grab the skin code.</p>
</section>
<section id="social_media_icons">
	<h3>Social Media - Icons</h3><hr class="notop">
<p>	Here&#39;s the css classes of the available social media icons in the template:</p>
<ul>	<li>		digg</li>
	<li>		dribbble</li>
	<li>		facebook</li>
	<li>		flickr</li>
	<li>		forrst</li>
	<li>		googleplus</li>
	<li>		html5</li>
	<li>		icloud</li>
	<li>		lastfm</li>
	<li>		linkedin</li>
	<li>		myspace</li>
	<li>		paypal</li>
	<li>		picasa</li>
	<li>		pinterest</li>
	<li>		reddit</li>
	<li>		rss</li>
	<li>		skype</li>
	<li>		stumbleupon</li>
	<li>		tumblr</li>
	<li>		twitter</li>
	<li>		vimeo</li>
	<li>		wordpress</li>
	<li>		yahoo</li>
	<li>		youtube</li>
</ul>
</section>
<section id="search">
	<h3>Search</h3><hr class="notop">
<p>	If you want to use Google Custom Search on your website you have to create an API Key and configure following these steps: - Go to: <a href="http://www.google.com/cse" target="_blank">http://www.google.com/cse</a></p>
<p>	&nbsp;</p>
<p>	<img src="assets/images/image_6.jpg"></p>
<p>	<img src="assets/images/image_9.jpg"></p>
<p>	<img src="assets/images/image_8.jpg"></p>
<p>	You&#39;ll see that the search redirects you to the file - page-search-results.html:</p>
<p>	&nbsp;</p>
<p>	<img src="assets/images/image_7.jpg"></p>
<p>	&nbsp;</p>
<p>	Open that file and paste there the code you copied from Google.</p>
<p>	<img src="assets/images/image_5.jpg"></p>
<p>	&nbsp;</p>
</section>
<section id="newsletter">
	<h3>Newsletter</h3><hr class="notop">
<p>	If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - <a href="http://mailchimp.com/">http://mailchimp.com/</a>).</p>
<p>	Once you have the MailChimp account you have to configure the subscription file with your APIKey, ListID and set the Datacenter. Open the file /php/newsletter-subscribe.php and change the variables:</p>
<p>	$apiKey = &#39;your-api-key&#39;;<br>
	-How get your Mailchimp API KEY - <a href="http://kb.mailchimp.com/article/where-can-i-find-my-api-key">http://kb.mailchimp.com/article/where-can-i-find-my-api-key</a></p>
<p>	$listId = &#39;your-list-id&#39;;<br>
	- How to get your Mailchimp LIST ID - <a href="http://kb.mailchimp.com/article/how-can-i-find-my-list-id">http://kb.mailchimp.com/article/how-can-i-find-my-list-id</a></p>
<p>	$submit_url = &quot;http://us2.api.mailchimp.com/1.3/?method=listSubscribe&quot;;<br>
	Replace us2 with your actual datacenter - Log into your account and look at the top of your browser. The first part of the URL identifies your datacenter.. - <a href="http://status.mailchimp.com/#find-your-datacenter">http://status.mailchimp.com/#find-your-datacenter</a></p>
</section>
<section id="responsive">
	<h3>Responsive</h3><hr class="notop">
<p>	The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions.</p>
<h4>
	<br>
	Here&#39;s what&#39;s included:&nbsp;</h4>
<p style="margin-left: 40px;">
	<strong>Label</strong>: Large display<br>
	<strong> Layout width:</strong> 1200px and up<br>
	<strong> Column width:</strong> 70px<br>
	<strong> Gutter width: </strong>30px<br>
	<br>
	<strong>Label</strong>: Default<br>
	<strong> Layout width: </strong>980px and up<br>
	<strong> Column width: </strong>60px<br>
	<strong> Gutter width:</strong> 20px<br>
	<br>
	<strong>Label</strong>: Portrait tablets<br>
	<strong> Layout width: </strong>768px and above<br>
	<strong> Column width:</strong> 42px<br>
	<strong> Gutter width: </strong>20px<br>
	<br>
	<strong> Label: </strong>Phones to tablets<br>
	<strong> Layout width: </strong>767px and below<br>
	<strong> Column width:</strong> Fluid columns, no fixed widths<br>
	<br>
	<strong> Label: </strong>Phones<br>
	<strong> Layout width:</strong> 480px and below<br>
	<strong> Column width:</strong> Fluid columns, no fixed widths</p>
<h4>
	<br>
	Utility classes</h4>
<p>	Use these utility classes for showing and hiding content by device.</p>
<pre class="plain" style="margin-left: 40px;">
visible-phone     
visible-tablet
visible-desktop
hidden-phone     
hidden-tablet     
hidden-desktop
</pre>
<h4>
	<br>
	<br>
	HTML Markup</h4>
<pre class="brush: html">
&lt;div class=&quot;visible-phone&quot;&gt;&lt;/div&gt;
</pre>
<p>	<br>
	If you need more information, please visit this site: <a href="http://twitter.github.com/bootstrap/scaffolding.html#responsive">http://twitter.github.com/bootstrap/scaffolding.html#responsive</a></p>
</section>
<section id="old_browsers">
	<h3>Old Browsers</h3><hr class="notop">
<p>	The template provides decent fallbacks for old browsers, such as Internet Explorer 8, &ndash; bug free. IE8 basically doesn&rsquo;t support any <strong>CSS3</strong>, except for some selectors, if you really need pixel perfect for old browsers you can try add <a href="http://css3pie.com/">http://css3pie.com/</a> on your web site.</p>
</section>
<section id="source_credits">
	<h3>Source & Credits</h3><hr class="notop">
<p class="info">
	The images included in preview are for demonstration purposes and should always be replaced with your own work.</p>
<p style="margin-left: 40px;">
	<br>
	<strong>Images</strong>: <a href="http://photodune.net/">http://photodune.net/</a><br>
	<strong>Subtle Patterns</strong>: <a href="http://subtlepatterns.com/">http://subtlepatterns.com/</a><br>
	Fonts:<br>
	<strong>&nbsp;&nbsp; &nbsp;Google Fonts</strong> - <a href="http://www.google.com/webfonts">http://www.google.com/webfonts</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Icons Font-face</strong> - <a href="http://fortawesome.github.com/Font-Awesome/">http://fortawesome.github.com/Font-Awesome/</a><br>
	<br>
	Scripts:<br>
	&nbsp;&nbsp; &nbsp;<strong>jQuery </strong>- <a href="http://www.jquery.com/">http://www.jquery.com/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Bootstrap Framework</strong> - <a href="http://twitter.github.com/bootstrap/">http://twitter.github.com/bootstrap/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Revolution Slider</strong> - <a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848">http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Nivo Slider</strong> - <a href="http://dev7studios.com/nivo-slider/">http://dev7studios.com/nivo-slider/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Isotope Jquery plugin</strong> - <a href="http://isotope.metafizzy.co">http://isotope.metafizzy.co</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Modernizr </strong>- <a href="http://modernizr.com/">http://modernizr.com/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Jquery Map marker plugin</strong> - <a href="http://www.welancers.com/jquery-map-marker-plugin/">http://www.welancers.com/jquery-map-marker-plugin/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Flex Slider</strong> - <a href="http://www.woothemes.com/flexslider/">http://www.woothemes.com/flexslider/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Respond.js</strong> - <a href="https://github.com/scottjehl/Respond">https://github.com/scottjehl/Respond</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Twitter JS Api</strong> - <a href="http://code.google.com/p/twitterjs/">http://code.google.com/p/twitterjs/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Jquery Flickr Plugin</strong> - <a href="http://www.newmediacampaigns.com/page/jquery-flickr-plugin">http://www.newmediacampaigns.com/page/jquery-flickr-plugin</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Jquery Easing</strong> - <a href="http://gsgd.co.uk/sandbox/jquery/easing/">http://gsgd.co.uk/sandbox/jquery/easing/</a><br>
	&nbsp;&nbsp;&nbsp; <strong>Fancybox </strong>- <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Jquery Validate </strong>- <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a><br>
	<strong>&nbsp;&nbsp; &nbsp;Jquery Cookie</strong> - <a href="https://github.com/carhartl/jquery-cookie">https://github.com/carhartl/jquery-cookie</a><br>
	<strong>&nbsp;&nbsp; &nbsp;SelectNav </strong>- <a href="https://github.com/lukaszfiszer/selectnav.js">https://github.com/lukaszfiszer/selectnav.js</a></p>
<p>	<br>
	<br>
	Once again, thank you so much for purchasing this template. As I said at the beginning, I&#39;d be glad to help you if you have any questions.</p>
<h4>
	<br>
	<strong>Crivos</strong></h4>
</section>

	</div>
</body>
</html>